<template>
  <LayoutView>
    <div class="banner" slot="banner">
      <el-carousel height="450px" trigger="click">
        <el-carousel-item v-for="item in adList" :key="item.id">
          <a style="display: block" :href="item.href" :target="item.target"><el-image :src="baseImageUrl+item.src" fit="cover"/>
          </a>
        </el-carousel-item>
      </el-carousel>
    </div>
    <BookList show-title show-type show-status title="热门图书" :book-list="hotList"/>
  </LayoutView>
</template>

<script>
import LayoutView from '@/views/front/components/LayoutView.vue'
import BookList from '@/views/front/components/BookList.vue'
export default {
  name: 'IndexView',
  components: { LayoutView, BookList },
  data () {
    return {
      adList: [],
      hotList: [],
      baseImageUrl: process.env.VUE_APP_BASE_URL + '/img/'
    }
  },
  methods: {
    getAdList () {
      this.$http.get('api/banner/list').then(({ data }) => {
        this.adList = [...data]
      })
    },
    getHotList () {
      this.$http.get('api/book/hot').then(({ data }) => {
        this.hotList = [...data]
      })
    }
  },
  created () {
    this.getAdList()
    this.getHotList()
  }
}
</script>

<style scoped>

</style>
